<template>
  <a-card :bordered="false" class="j-inner-table-wrapper">
    <!-- 查询区域 begin -->
    <div class="table-page-search-wrapper">
      <a-form :form="form" layout="inline">
        <a-row :gutter="24">
          <a-col :lg="7" :md="8" :sm="24" :xl="6">
            <a-form-item label="库存调整名称">
              <a-input placeholder="请输入库存调整名称" v-model="queryParam.adjustName" />
            </a-form-item>
          </a-col>
          <a-col :lg="7" :md="8" :sm="24" :xl="6">
            <a-form-item label="仓库">
              <j-popup
                v-decorator="['storeName']"
                :trigger-change="true"
                :list-data.sync="listData"
                org-fields="id,store_name"
                dest-fields="storeId,storeName"
                code="store_info"
                @callback="popupCallback"
              />
            </a-form-item>
          </a-col>
          <a-col :lg="7" :md="8" :sm="24" :xl="6">
            <a-form-item label="调整类型">
              <j-dict-select-tag dictCode="adjust_type" placeholder="请选择调整类型" v-model="queryParam.adjustType" />
            </a-form-item>
          </a-col>
          <!-- <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="申请人">
                <a-input v-model="queryParam.applicant" placeholder="请输入申请人" />
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="审批人">
                <a-input v-model="queryParam.approvalPerson" placeholder="请输入审批人" />
              </a-form-item>
            </a-col> -->
          <a-col :lg="7" :md="8" :sm="24" :xl="6">
            <a-form-item label="审批状态">
              <j-dict-select-tag dictCode="approval_status" placeholder="请选择审批状态" v-model="queryParam.status" />
            </a-form-item>
          </a-col>
          <a-col :lg="12" :md="12" :sm="24" :xl="12">
            <a-form-item label="申请时间">
              <j-date
                class="query-group-cust"
                date-format="YYYY-MM-DD HH:mm:ss"
                placeholder="请选择开始时间"
                show-time
                v-model="queryParam.applicationTime_begin"
              />
              <span class="query-group-split-cust"></span>
              <j-date
                class="query-group-cust"
                date-format="YYYY-MM-DD HH:mm:ss"
                placeholder="请选择结束时间"
                show-time
                v-model="queryParam.applicationTime_end"
              />
            </a-form-item>
          </a-col>
          <a-col :lg="12" :md="12" :sm="24" :xl="12">
            <a-form-item label="审批时间">
              <j-date
                class="query-group-cust"
                date-format="YYYY-MM-DD HH:mm:ss"
                placeholder="请选择开始时间"
                show-time
                v-model="queryParam.approvalTime_begin"
              />
              <span class="query-group-split-cust"></span>
              <j-date
                class="query-group-cust"
                date-format="YYYY-MM-DD HH:mm:ss"
                placeholder="请选择结束时间"
                show-time
                v-model="queryParam.approvalTime_end"
              />
            </a-form-item>
          </a-col>
          <a-col :lg="7" :md="8" :sm="24" :xl="6">
            <span class="table-page-search-submitButtons table-operator">
              <a-button @click="searchQuery" icon="search" type="primary">查询</a-button>
              <a-button @click="searchReset1" icon="reload" type="primary">重置</a-button>
              <!-- <a @click="handleToggleSearch" style="margin-left: 8px">
                <span>{{ toggleSearchStatus ? '收起' : '展开' }}</span>
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a> -->
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域 end -->

    <!-- 操作按钮区域 begin -->
    <div class="table-operator">
      <a-button @click="handleAdd" icon="plus" type="primary" v-has="'adjust:add'">新增</a-button>
      <a-button @click="handleExportXls('库存调整表')" icon="download" type="primary">导出</a-button>
      <!-- <a-upload
        name="file"
        :showUploadList="false"
        :multiple="false"
        :headers="tokenHeader"
        :action="importExcelUrl"
        @change="handleImportExcel"
      >
        <a-button type="primary" icon="import">导入</a-button>
      </a-upload> -->

      <!-- <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel">
            <a-icon type="delete" />
            <span>删除</span>
          </a-menu-item>
        </a-menu>
        <a-button>
          <span>批量操作</span>
          <a-icon type="down" />
        </a-button>
      </a-dropdown> -->
    </div>
    <!-- 操作按钮区域 end -->

    <!-- table区域 begin -->
    <div>
      <a-alert showIcon style="margin-bottom: 16px" type="info">
        <template slot="message">
          <span>已选择</span>
          <a style="font-weight: 600; padding: 0 4px">{{ selectedRowKeys.length }}</a>
          <span>项</span>
          <a @click="onClearSelected" style="margin-left: 24px">清空</a>
        </template>
      </a-alert>

      <a-table
        :columns="columns"
        :dataSource="dataSource"
        :expandedRowKeys="expandedRowKeys"
        :loading="loading"
        :pagination="ipagination"
        :rowSelection="{ selectedRowKeys, onChange: onSelectChange }"
        @change="handleTableChange"
        @expand="handleExpand"
        bordered
        class="j-table-force-nowrap"
        ref="table"
        rowKey="id"
        size="middle"
      >
        <!-- 内嵌table区域 begin -->
        <template slot="expandedRowRender" slot-scope="record">
          <a-tabs tabPosition="top">
            <a-tab-pane forceRender key="stockAdjustApprovalDetail" tab="库存调整明细表">
              <stock-adjust-approval-detail-sub-table :record="record" />
            </a-tab-pane>
          </a-tabs>
        </template>
        <!-- 内嵌table区域 end -->

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>

        <template slot="imgSlot" slot-scope="text">
          <div style="font-size: 12px; font-style: italic">
            <span v-if="!text">无图片</span>
            <img :src="getImgView(text)" alt="" style="max-width: 80px; height: 25px" v-else />
          </div>
        </template>

        <template slot="fileSlot" slot-scope="text">
          <span style="font-size: 12px; font-style: italic" v-if="!text">无文件</span>
          <a-button @click="downloadFile(text)" ghost icon="download" size="small" type="primary" v-else>
            <span>下载</span>
          </a-button>
        </template>

        <template slot="action" slot-scope="text, record">
          <span v-has="'adjust:edit'" v-show="isShowBtn(record)">
            <a @click="handleEdit(record)">编辑</a>
          </span>
          <span v-has="'adjust:approval'" v-show="isShowBtn(record)">
            <a-divider type="vertical" />
            <a @click="handleApproval(record)">审批</a>
            <a-divider type="vertical" />
          </span>
          <a-dropdown>
            <a class="ant-dropdown-link">
              <span>更多 <a-icon type="down" /></span>
            </a>
            <a-menu slot="overlay">
              <a-menu-item v-has="'adjust:detail'">
                <a @click="handleDetail(record)">详情</a>
              </a-menu-item>
              <!--              <a-menu-item v-show="isShowBtn(record)" v-has="'adjust:deleted'">-->
              <!--                <a-popconfirm title="确定删除吗?" @confirm="handleDelete(record.id)">-->
              <!--                  <a>删除</a>-->
              <!--                </a-popconfirm>-->
              <!--              </a-menu-item>-->
            </a-menu>
          </a-dropdown>
        </template>
      </a-table>
    </div>
    <!-- table区域 end -->

    <!-- 表单区域 -->
    <stock-adjust-approval-modal @ok="modalFormOk" ref="modalForm" />
  </a-card>
</template>

<script>
import pick from 'lodash.pick'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import StockAdjustApprovalModal from './modules/StockAdjustApprovalModal'
import StockAdjustApprovalDetailSubTable from './subTables/StockAdjustApprovalDetailSubTable'
import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
import JDate from '@/components/jeecg/JDate.vue'
import '@/assets/less/TableExpand.less'

export default {
  name: 'StockAdjustApprovalList',
  mixins: [JeecgListMixin],
  components: {
    StockAdjustApprovalModal,
    StockAdjustApprovalDetailSubTable,
    JDate,
    JDictSelectTag,
  },
  watch: {
    listData: {
      immediate: true,
      handler(val) {
        if (val) {
          let row = {
            storeId: val[0].id,
            storeName: val[0].store_name,
          }
          this.popupCallback(row)
        }
      },
    },
  },
  computed: {
    importExcelUrl() {
      return window._CONFIG['domianURL'] + this.url.importExcelUrl
    },
    isShowBtn() {
      return function (record) {
        return ['待审批', '拒绝'].includes(record['status_dictText'])
      }
    },
  },
  data() {
    return {
      description: '库存调整表列表管理页面',
      form: this.$form.createForm(this),
      listData: null,
      // 表头
      columns: [
        {
          title: '#',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: (t, r, index) => parseInt(index) + 1,
        },
        {
          title: '库存调整名称',
          align: 'center',
          dataIndex: 'adjustName',
        },
        {
          title: '调整前仓库',
          align: 'center',
          dataIndex: 'fromStoreId_dictText',
        },
        {
          title: '调整后仓库',
          align: 'center',
          dataIndex: 'toStoreId_dictText',
        },
        {
          title: '调整类型',
          align: 'center',
          dataIndex: 'adjustType_dictText',
        },
        {
          title: '调整原因',
          align: 'center',
          dataIndex: 'adjustReason',
        },
        {
          title: '申请人',
          align: 'center',
          dataIndex: 'applicant',
        },
        {
          title: '审批人',
          align: 'center',
          dataIndex: 'approvalPerson',
        },
        {
          title: '审批状态',
          align: 'center',
          dataIndex: 'status_dictText',
        },
        {
          title: '申请时间',
          align: 'center',
          dataIndex: 'applicationTime',
        },
        {
          title: '审批时间',
          align: 'center',
          dataIndex: 'approvalTime',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: 147,
          scopedSlots: { customRender: 'action' },
        },
      ],
      // 字典选项
      dictOptions: {},
      // 展开的行test
      expandedRowKeys: [],
      url: {
        list: '/storage/stockAdjustApproval/list',
        delete: '/storage/stockAdjustApproval/delete',
        deleteBatch: '/storage/stockAdjustApproval/deleteBatch',
        exportXlsUrl: '/storage/stockAdjustApproval/exportXls',
        importExcelUrl: '/storage/stockAdjustApproval/importExcel',
      },
    }
  },
  methods: {
    initDictConfig() {},

    handleExpand(expanded, record) {
      this.expandedRowKeys = []
      if (expanded === true) {
        this.expandedRowKeys.push(record.id)
      }
    },
    handleApproval: function (record) {
      this.$refs.modalForm.edit(record)
      this.$refs.modalForm.title = '审批'
      this.$refs.modalForm.disableSubmit = true
    },
    popupCallback(row) {
      this.queryParam.fromStoreId = row.storeId
      this.form.setFieldsValue(pick(row, 'storeName'))
    },
    searchReset1() {
      this.form.setFieldsValue({ storeName: '' })
      this.searchReset()
    },
  },
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
</style>